<template>
  <div class="project">
    <!-- 预警结果  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>预警结果</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择省">
              <el-option label="湖南省" value="shanghai"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择市">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择区">
              <!-- <el-option label="" value="shanghai"></el-option> 
              <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择项目">
              <el-option label="常德省厅普适型检测项目" value="shanghai"></el-option> 
              <el-option label="常德普适型地灾检测(1170)" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择监测点">
              <el-option label="常德市石门县南北镇潘坪村雷家山滑坡" value="shanghai"></el-option> 
              <el-option label="常德澧县甘溪镇顺桥地灾隐患点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="warp warp1 warp2"> 
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline"> 
          <el-form-item label=""> 
            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="queryFrom.input"> </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="预警时间" class="input_inner_selct">
              <el-option label="今日预警" value="shanghai"></el-option>  
            </el-select>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form> 
      </div> 
      <el-table v-loading="loading" :data="configList">  
        <el-table-column label="监测点名称" align="center" prop="pointName" />
        <el-table-column label="预警数量" width="140" align="center" prop="warnDeviceCount" :show-overflow-tooltip="true" />
        <el-table-column label="最高预警等级" width="140" align="center" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <div class="cell">
              <el-tag v-show="scope.row.maxWarnLevel" :id="getId(scope.row.maxWarnLevel)">{{ scope.row.maxWarnLevel }}</el-tag> 
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最高预警时间" align="center" prop="maxWarnTime" :show-overflow-tooltip="true" />
        <el-table-column label="最新预警时间" align="center" prop="maxLevelWarnTime" :show-overflow-tooltip="true" />  
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">预警详情</el-button>  
            <el-button size="mini" type="text">预警广播</el-button>  
          </template>
        </el-table-column>
      </el-table> 
        <div class="footer">
          <div>
            共：7条数据
          </div> 
        </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryFrom: {},
    loading: false,
    configList: [
      { "pointName": "临澧县修梅镇高桥村白堰五组滑坡", "warnDeviceCount": 4, "maxWarnLevel": "蓝色预警", "maxWarnTime": "2024-02-02 10:00:00", "maxLevelWarnTime": "2024-02-02 05:29:01", "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12935, "maxLevelWarnModelResultId": 7350025 },
      { "projectId": 10474, "projectName": "湖南省石门县南北镇潘坪村雷家山滑坡", "pointId": 12228, "pointName": "常德市石门县南北镇潘坪村雷家山滑坡" },
      { "projectId": 10476, "projectName": "常德市澧县甘溪镇顺桥地灾监测项目", "pointId": 12233, "pointName": "常德澧县甘溪镇顺桥地灾隐患点" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12936, "pointName": "临澧县太浮镇响水村朱伦组朱伦桥河岸滑坡" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12937, "pointName": "临澧县太浮镇胜利村大方组陈二胜利小学不稳定斜坡" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12997, "pointName": "临澧县停弦渡镇福船村1组华家屋场滑坡", "warnDeviceCount": 1, "maxWarnLevel": "蓝色预警", "maxLevelWarnModelResultId": 7358014, "maxLevelWarnTime": "2024-02-02 16:22:51", "maxWarnTime": "2024-02-02 16:22:51" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12998, "pointName": "临澧县停弦渡镇山洲村童16组连三坡滑坡" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 12999, "pointName": "桃源县浔阳街道梅溪桥村关斗山组杨利军等3户滑坡" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 13000, "pointName": "临澧县修梅镇观音洞村窝儿曹门滑坡", "warnDeviceCount": 4, "maxWarnLevel": "蓝色预警", "maxLevelWarnModelResultId": 7349979, "maxLevelWarnTime": "2024-02-02 05:25:00", "maxWarnTime": "2024-02-02 10:00:02" },
      { "projectId": 10491, "projectName": "常德普适型地灾监测（1170）", "pointId": 13013, "pointName": "临澧县修梅镇林家垭村周家二组滑坡" }
    ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: "0"},
      {label: "在线",value: "1"},
      {label: "离线",value: "2"},
      {label: "已禁用",value: "3"},
      {label: "维护中",value: "4"},
      {label: "维护结束",value: "5"}
    ]
  }
},
methods:{
  getList(){}, 
  getId(data){
    switch (data) {
      case "蓝色预警":
        return "warnLevel1"; 
      case "黄色预警":
        return "warnLevel2"; 
      case "橙色预警":
        return "warnLevel3"; 
      case "红色预警":
        return "warnLevel4"; 
    }
  },
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss"; 
.el-select,.el-input{
  width: 14.6vw !important;
}
.footer{
  div{
    margin-top: 10px;
    font-size: 15px;
    color: #303133;
  }
}
.input_inner_selct{
  width: 100px;
}
</style>